<template>
  <div class="content_body">
    <div class="content_">
      <div class="contents_">
        <div class="content_header">
          <div class="content_back"><a href="#/index">&lt;</a></div>
          <div class="mine_">
            <span>公告</span>
          </div>
        </div>
        <div class="notice_container">
          <div class="notice_header">
            <div class="notice_title">{{ contentData.contentTitle }}</div>
            <div class="notice_info">
              <span>发布者：{{ contentData.entryName }}</span><br>
              <span>发布时间：{{ formatDate(contentData.createTime) }}</span>
            </div>
          </div>
          <div class="notice_content">{{ contentData.contentInfo }}</div>
        </div>
      </div>

      <!-- 商品列表 -->

      <div class="product-list">
        <div class="notice-title" v-if="productsData">相关产品推荐</div>
        <div class="product-item" v-for="(item) in productsData" :key="item.id" @click="goToProductDetail(item.id)">
          <img :src="item.image" alt="product image" class="product-image" />
          <div class="product-info">
            <h3 class="product-name">{{ item.name }}</h3>
            <p class="product-price">￥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { jwtDecode } from 'jwt-decode';
import moment from 'moment';
export default {
  data() {
    return {
      contentData: {},
      productsData: []
    };
  },
  methods: {
    //日期格式修改
    formatDate(date) {
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss');
      }
      return '';
    },
    //跳转产品详情页面
    goToProductDetail(productId) {
      const jwt = localStorage.getItem('jwt');
      if (jwt) {
        const decoded = jwtDecode(jwt);
        const studentId = decoded.id; // 确保你的token结构中有id字段
        const IdData = {
          productId: productId,
          studentId: studentId
        };
        this.$http.post('/api/students/addStudentBehavior', IdData, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          if (response.data.code === 1) {

          } else {
            this.$message.error(response.data.message);
          }
        })
          .catch(error => {
            // 处理请求失败的逻辑
            this.$message.error("报名请求出错，请稍后重试");
          });
        this.$router.push({ name: 'ProductDetail', params: { id: productId } });
      }
      else {
        this.$router.push({ name: 'ProductDetail', params: { id: productId } });
      }
    }
  },


  mounted() {
    const id = this.$route.params.id;
    this.$http.get("/api/contents/queryOneContentById/" + id)
      .then((response) => {
        this.contentData = response.data.data;
        this.$http.get("/api/products/queryProductByContent/" + this.contentData.typeId)
          .then((response) => {
            this.productsData = response.data.data;
          })
          .catch(() => {
            this.$message.error("请求错误");
          });
      })
      .catch(() => {
        this.$message.error("请求错误");
      });
  },
};
</script>

<style>
.content_header {
  color: lightskyblue;
  font-size: 20px;
  text-align: center;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  color: black;
}

.content_back {
  margin-right: 16vw;
}

.content_back a {
  text-decoration: none;
}

.mine_ {
  margin-right: 18vw;
  margin-top: 20px;
  white-space: nowrap;
}

.content_body {
  background-color: #f5f7f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150vh;
  overflow-y: auto;
}

.content_ {
  background-color: white;
  width: 39vw;
  height: 150vh;
}

.notice_container {
  margin: 40px;
}

.notice_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.notice_title {
  font-size: 24px;
  font-weight: bold;
}

.notice_info {
  margin-top: 10px;
  color: #666;
}

.notice_content {
  line-height: 2;
}

/* 产品列表样式 */
.notice-title {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}

.product-list {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  /* 根据需要调整 */
}

.product-image {
  width: 200px;
  height: 150px;
  /* 根据需要调整 */
  height: auto;
  margin-right: 20px;
  /* 根据需要调整 */
}

.product-info {
  flex: 1;
}

.product-name,
.product-price {
  margin: 0;
  /* 移除默认的margin */
}

.view-more {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
</style>
